<template>
  <div class="print">
    <n-card size="medium" style="margin-bottom: 10px">
      <h3 @click="print(printRef, true, 88, 50)">点击打印</h3>
      <span id="h1" ref="printRef">我是打印内容</span>
    </n-card>
    <n-card size="medium" style="margin-bottom: 10px">
      <h3 @click="print(tableRef, true, 88, 50)">点击打印表格</h3>
      <div ref="tableRef">
        <table
          border="1"
          width="300"
          id="tb01"
          style="
            border: solid 1px black;
            border-collapse: collapse;
            background-color: #e3e3e3;
          "
        >
          <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
          </tr>
          <tr v-for="people in tableData" :key="people.name">
            <td style="text-align: center">{{ people.name }}</td>
            <td style="text-align: center">{{ people.sex }}</td>
            <td style="text-align: center">{{ people.age }}</td>
          </tr>
        </table>
      </div>
    </n-card>
  </div>
</template>

<script lang="ts" setup name="print">
import { getLodop } from '@/utils/LodopFuncs'
import { print } from '@/utils/print'
const printRef = ref()
const tableRef = ref<HTMLInputElement | null>(null)
const tableData = [
  {
    age: 19,
    name: '张三',
    sex: 1
  },
  {
    age: 30,
    name: '麦克',
    sex: 1
  },
  {
    age: 19,
    name: '约翰',
    sex: 1
  },
  {
    age: 24,
    name: '莉莉',
    sex: 0
  }
]
</script>

<style lang="less" scoped id="style1">
table {
  border: 1px solid red;
}
</style>
